<script setup>
import { ref } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { StreamLanguage } from '@codemirror/language'
import { yaml } from '@codemirror/legacy-modes/mode/yaml'

const extensions = [StreamLanguage.define(yaml),]
let code = ref('')
const props = defineProps({
    placeHolderMessage: {
        type: String,
        default:"请输入一些内容"
    },
    height: {
        type: String,
        default: "400px"
    },
    width: {
        type: String,
        default: "100%"
    }
})
</script>

<template>
  <Codemirror 
    v-mode="code"
    :extensions="extensions"
    :placeholder="placeHolderMessage"
    :style="{height: props.height, width: props.width, border: '1px dashed grey;'}"
    class="codemirror"
  />
</template>

<style scoped>
.codemirror{
    text-align: left;
    overflow-y: scroll;
}
</style>
